<template>
  <div class="tabs">
    <div
      :class="{ active: 'CHAT' === value }"
      @click="changeTab('CHAT')"
      class="tab_item"
    >
      <i class="el-icon-search"></i>
      <span> Ai对话</span>
    </div>
    <div
      v-for="(item, index) in dataList"
      :key="index"
      :class="{ active: item.type === value }"
      @click="changeTab(item.type)"
      class="tab_item"
    >
      <i :class="item.icon"></i>
      <span>{{ item.name }}</span>
    </div>
    <div
      ref="mote"
      @click.stop="clickMote"
      v-show="widthSizeType === 'min'"
      class="tab_item"
    >
      <i class="el-icon-wallet"></i>
      <span>更多</span>
    </div>
    <dropdown
      ref="refDropdown2"
      @command="changeTab"
      :dropdownItem="dropdownItem"
      :dataList="dataList2"
    >
    </dropdown>
  </div>
</template>

<script>
import dropdown from "../utils/dropdown.vue";
export default {
  components: {
    dropdown,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  computed: {
    functionData() {
      return this.$store.state.aiChat.functionData;
    },
    dataList() {
      if (this.widthSizeType === "min") {
        return this.functionData.filter((item, index) => index < 1);
      } else {
        return this.functionData;
      }
    },
    dataList2() {
      if (this.widthSizeType === "min") {
        return this.functionData.filter((item, index) => index >= 1);
      } else {
        return this.functionData;
      }
    },
    // 设备
    widthSizeType() {
      return this.$store.state.aiChat.widthSizeType;
    },
  },
  data() {
    return {
      dropdownItem: {
        rect: {},
        item: {},
      },
    };
  },
  methods: {
    changeTab(tabType) {
      this.$emit("input", tabType);
      this.$emit("change", tabType);
    },
    clickMote() {
      this.dropdownItem = {
        rect: this.$refs.mote.getBoundingClientRect(),
        item: {},
      };
      this.$refs.refDropdown2.toggleDropdown();
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  align-items: center;
  margin-left: 10px;
  .tab_item {
    padding: 8px 10px;
    border-radius: 16px 16px 16px 16px;
    border: 1px solid #e7e7e7;
    background-color: #fff;

    margin: 0px 10px 10px 0;
    transition: 0.1s;
    cursor: pointer;
    &:hover {
      background-color: #f5f6fa;
      border: 1px solid #d3d3d3;
      color: black;
    }
  }
  .active {
    border: 1px solid #a3a9f7;
    color: #0052d9;
    &:hover {
      background-color: #eff0f8;
      border: 1px solid #a3a9f7;
      color: #0052d9;
    }
  }
}
</style>
